<template>
  <div class="goods-add">
    <div class="goods-add-content">
    <el-form
      ref="formRef"
      class="goods-add-form"
      label-width="auto"
      :model="formData"
      style="max-width: 600px"
    >
      <el-form-item label="订单编号" label-position="right">
        <el-input v-model="formData.orderNo" readonly />
      </el-form-item>
      <el-form-item label="订单状态" label-position="right">
        <el-select v-model="formData.status" placeholder="" disabled>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="交易流水号" label-position="right">
        <el-input v-model="formData.outTradeNo" readonly  />
      </el-form-item>
      <el-form-item label="物流单号" label-position="right">
        <el-input v-model="formData.logNo" readonly  />
      </el-form-item>
      <el-form-item label="用户昵称" label-position="right">
        <el-input v-model="formData.nickname" readonly  />
      </el-form-item>
      <el-form-item label="联系电话" label-position="right">
        <el-input v-model="formData.phone" readonly  />
      </el-form-item>
      <el-form-item label="订单金额" label-position="right">
        <el-input v-model="formData.orderAmount" readonly  />
      </el-form-item>
      <el-form-item label="是否参与国补" label-position="right">
        <el-select v-model="formData.subsidy" disabled>
          <el-option label="是" :value="1">
          </el-option>
          <el-option label="否" :value="0">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form
      ref="formRef2"
      class="goods-add-form"
      label-width="auto"
      :model="formData"
      
    >
      <el-form-item label="商品信息">
        <el-table :data="formData.itemList" style="width: 100%">
          <el-table-column prop="prop" label="商品名称" width="200">
            <template #default="scope">
              {{ scope.row.goodsName }}
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="封面图" width="200">
            <template #default="scope">
             <img :src="scope.row.goodsImg" style="width: 100px; height: 60px;" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="原件" width="200">
            <template #default="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="购买数量" width="200">
            <template #default="scope">
              {{ scope.row.num }}
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="收获地址">
        {{ formData?.addressInfo?.showAddress }}
      </el-form-item>
      <el-form-item label="收件人">
        {{ formData?.addressInfo?.name }}
      </el-form-item>
      <el-form-item label="联系方式">
        {{ formData?.addressInfo?.phone }}
      </el-form-item>

    </el-form>
  </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {  getOrderDetail } from '@/api/order/index.js'
const { proxy } = getCurrentInstance();

const id = proxy.$route.query.id

const formRef = ref(null);
let formData = ref({})
const options = ref([
  { label: '待付款', value: 1 },
  { label: '待发货', value: 2 },
  { label: '待收货', value: 3 },
  { label: '待评价', value: 4 },
  { label: '已完成', value: 5 },
  { label: '已取消', value: 6 },
])

getOrderDetail({ id }).then(res => {
  formData.value = res.data
})



</script>
<style lang="scss">
.goods-add {
  padding: 8px;
  &-content {
    background: #fff;
    border-radius: 5px;
    padding: 12px;
  }
}
</style>